* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none; /* Evita selección accidental de texto */
  }
body{
	background: #2a8dff25;
	font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;
	margin: 0;
    padding-bottom: 90px;
    box-sizing: border-box;
}

/**************HEADER**************/

.imagen2 {
	padding: 15px;
	text-align: left;
	height: 100px;
	width: 180px;
	flex-shrink: 0;
	background: #021224;
	max-width: 100% !important;
    overflow-x: hidden !important;
}
header {
    background: linear-gradient(135deg, #021224 0%, #021224 100%);
    color: #3288eb;
    padding: 1rem 2rem 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(31, 165, 19, 0.1);
    height: 100px;
    padding: 2px;
    margin: none;
    width: 100%;
    font-size:  15px;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	max-width: 100% !important;
    overflow-x: hidden !important;
}
           
        nav {
                display: flex;
                align-items: end;
                flex-basis: 300px;
                padding: 35px;
            }
            nav a{
                
                color:#3288eb;
                text-decoration: none;
            }
            nav a:hover{
                color: rgb(66, 195, 247);
            }      
        .logo a {
            color: #fff;
            text-decoration: none;
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 10px;
            display: inline-block;
        }
        .nav-menu {
            list-style: none;
            display: flex;
            gap: 1.5rem;   /* separa as pestañas*/
            margin-right: 200px;
        }
        .nav-menu a {
            color:#021730;
            text-decoration: none;
            padding: 0.5rem 1.2rem;
            background-color: #fff;
            border-radius: 18px 18px 0 0;
            transition: all 0.3s ease;
            display: inline-block;
            transform: translateY(38px);
            border-bottom: 3px solid transparent;
        }
        .nav-menu a:hover {
            border-bottom-color: #fff;
            transform: translateY(35px);
        }

        /* Botón hamburguesa (oculto en desktop) */
        .menu-toggle {
            display: none;
            cursor: pointer;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
        }
        .menu-toggle span {
            width: 100%;
            height: 3px;
            background-color: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        /* fin menu hamburguesa*/


         /* Responsive móvil */
        @media (max-width: 400px) {
            header {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
                width: 100%;
				
				height: auto;
                position: relative;
				background-color: #021224 ;
				grid-row: auto;
				grid-column: auto;
				
	        }
            .imagen2 {
				flex-shrink: 0;
				margin-left: 10px;
				height: auto;
				width: 50%;
			}
           .logo a {
                margin-bottom: 0;
                font-size: 1.5rem;
            }
            .menu-toggle { display: flex;}
            #nav-menu {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
				color:#021730;
                /*z-index: 999;*/
            }
            #nav-menu.active { max-height: 200px;  }
            .nav-menu {
                flex-direction: column;
                gap: 2px;
				margin-left: 0;
                padding: 0rem;
				color:#021730;
            }
            .nav-menu a {
                transform: none;
                border-radius: 15px;
                text-align: center;
                /*padding: 0.45rem;*/
                margin: 0.15rem 0;
                color:#021730;
            	text-decoration: none;
           		/*padding: 0.5rem 1.2rem;*/
           		background-color: #fff;
    			transform: translateY(38px);
           		border-bottom: 3px solid transparent;
			}
            .nav-menu a:hover {
                border-bottom-color: #fff;
	            transform: translateY(35px);
            }
            /* Animación hamburguesa */
            .menu-toggle.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            .menu-toggle.active span:nth-child(2) {
                opacity: 0;
            }
            .menu-toggle.active span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -6px);
            }
       }
        /*fin responsive movil */


/***********MAIN***********/

.main-content {
            max-width: 1200px;
            width: 100%;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border-radius: 48px;
            padding: 60px 40px;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
			max-width: 100% !important;
    		overflow-x: hidden !important;
			margin-top: 20px; /* o padding-top: 20px; */
  			scroll-margin-top: 100px; /* si usas anclas */
}
.radial-menu-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 550px;
            position: relative;
			max-width: 100% !important;
    		overflow-x: hidden !important;
			margin-top: 60px; /* separación del header */
}
.menu-center {
            width: 130px;
            height: 130px;
            background: radial-gradient(circle at 30% 20%, #1e9dcf, #1195b6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.2);
            transition: transform 0.2s ease;
            position: relative;
            z-index: 500;
            font-weight: bold;
            font-size: 1.4rem;
            letter-spacing: 1px;
            color: white;
            text-transform: uppercase;
            text-align: center;
    }
    .menu-center:hover { transform: scale(1.05); }
    .menu-center:active { transform: scale(0.98);  }
    .menu-item { 
		    position: absolute;
            width: 100px;
            height: 100px;
            background: #021224;
            backdrop-filter: blur(12px);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
            font-weight: 500;
            font-size: 0.85rem;
            transition: background 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.25);
            text-align: center;
            z-index: 500;
            opacity: 0;
            visibility: hidden;
            cursor: pointer;
            /* Posiciones base (ocultas) */
            transform: translate(0, 0);
        }
        .menu-item span:first-child {
            font-size: 2rem;
            margin-bottom: 5px;
            display: block;
        }
        .menu-item span:last-child {
            font-size: 0.7rem;
            font-style: italic;
            color: #13c4f0;
            letter-spacing: 0.5px;
        }
        /* Hover solo cambia color y sombra, NUNCA escala ni posición */
        .menu-item:hover {
            background: #2e8db3;
            border-color: white;
            box-shadow: 0 0 20px rgba(47, 162, 207, 0.8);
        }
        /* Cuando está activo, los items se muestran en posición */
        .radial-menu-container.active .menu-item {
            opacity: 1;
            visibility: visible;
        }

        /* Desktop */
        @media (min-width: 768px) {
			.main-content { width: auto; }
            .radial-menu-container.active .menu-item[data-pos="0"] { transform: translate(170px, 0); }
            .radial-menu-container.active .menu-item[data-pos="1"] { transform: translate(120px, 120px); }
            .radial-menu-container.active .menu-item[data-pos="2"] { transform: translate(0, 170px); }
            .radial-menu-container.active .menu-item[data-pos="3"] { transform: translate(-120px, 120px); }
            .radial-menu-container.active .menu-item[data-pos="4"] { transform: translate(-170px, 0); }
            .radial-menu-container.active .menu-item[data-pos="5"] { transform: translate(-120px, -120px); }
            .radial-menu-container.active .menu-item[data-pos="6"] { transform: translate(0, -170px); }
            .radial-menu-container.active .menu-item[data-pos="7"] { transform: translate(120px, -120px); }
        }
        /* Móvil */
        @media (max-width: 767px) {
            .menu-item { width: 70px; height: 70px; }
            .menu-item span:first-child { font-size: 1.5rem; }
            .menu-item span:last-child { font-size: 0.6rem; }
			.radial-menu-container {
					min-height: 400px !important;
					overflow-x: visible !important;
				}
			.radial-menu-container.active .menu-item[data-pos="0"] { transform: translate(110px, 0); }
            .radial-menu-container.active .menu-item[data-pos="1"] { transform: translate(78px, 78px); }
            .radial-menu-container.active .menu-item[data-pos="2"] { transform: translate(0, 110px); }
            .radial-menu-container.active .menu-item[data-pos="3"] { transform: translate(-78px, 78px); }
            .radial-menu-container.active .menu-item[data-pos="4"] { transform: translate(-110px, 0); }
            .radial-menu-container.active .menu-item[data-pos="5"] { transform: translate(-78px, -78px); }
            .radial-menu-container.active .menu-item[data-pos="6"] { transform: translate(0, -110px); }
            .radial-menu-container.active .menu-item[data-pos="7"] { transform: translate(78px, -78px); }
        }
        .info-text {
            text-align: center;
			margin-top: 60px;
            color: rgba(33, 109, 145, 0.733);
            font-size: 0.9rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 30px;
        }

/***************FIN DE MAIN*************************/

.imagen {
    float: none !important;
    width: 90% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    display: block !important;
    height: auto !important;
}

iframe {
    display: none; /* Oculta el iframe para probar */
}

footer {
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	display: flex;
    font-size:  12px;
    font-family: 'Times New Roman', Times, serif ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #021224;
	height: 70px;
	padding-bottom: 20px;
	z-index: 1000;
	max-width: 100% !important;
    overflow-x: hidden !important;
}
.imagen3 {
	display: flex;
	text-align: center;
	height: 40px;
	width: 40px;
	margin-top: 2px;
	flex-direction: row;
	justify-content: space-between;
}
.flex-fo {
	display: flex;
    margin-top: 20px;
    flex-direction: row;
    width: 200px;  
    color:#3288eb;
	text-align: center;  
	justify-content: space-between;
}

/*************Ocultar scrollbars en Chrome, Edge y Safari ****/
.imagen2::-webkit-scrollbar { width: 0px; background: transparent;}
footer::-webkit-scrollbar { width: 0px; background: transparent;}
header::-webkit-scrollbar {    width: 0px;  background: transparent;}
html::-webkit-scrollbar { width: 0px;  background: transparent;}
/* Opcional: para Firefox */
html { scrollbar-width: none;}
/******************************/